<template>
    <ElSelect v-model="selfValue" :clearable="clearable || true" @change="change">
        <template v-if="subline && subline.length">
            <ElOption v-for="item in dictDataList" :disabled="opsDisabled(item.dictValue)" :key="item.dictValue" :label="item.dictDesc" :value="item.dictValue" />
        </template>
        <template v-else-if="!foo">
            <ElOption v-for="item in dictDataList" :key="item.dictValue" :label="item.dictDesc" :value="item.dictValue" />
        </template>

        <template v-else>
            <ElOption v-for="item in dictDataList" :key="item.dictValue" :label="`${item.dictDesc}-${item.dictValue}`" :value="item.dictValue" />
        </template>
    </ElSelect>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue';
import { ElOption, ElSelect, useFormItem } from 'element-plus';
import { DictType } from './localDictDefine';
import useDictData from './useDictData';

const props = defineProps<{
    modelValue: string;
    parentId?: number;

    type: DictType;
    clearable?: boolean;
    foo?:boolean
    subline: array
}>();


const emit = defineEmits<{
    (e: 'update:modelValue', val: string): void;
    (e: 'change', val: string): void;
}>();

const { formItem } = useFormItem();


const opsDisabled = computed(() => {
    return code => {
        const target = props.subline.findIndex(item => item.subLineCode === code)
        return target > -1
    }
})

const selfValue = computed({
    get() {
        return props.modelValue;
    },
    set(val: string) {
        emit('update:modelValue', val);
    },
});

const change = (e) => {
    emit('change', e);
    formItem?.validate('change').catch((err: any) => console.log(err));
};

const { dictDataList, getDeviceTypeFromStation } = useDictData({ type: props.type });
watch(() => props.parentId, val => {
    if(val) {
        getDeviceTypeFromStation(val);
    }
},
{ immediate: true}
);
</script>

<style lang="scss" scoped></style>
